<template>
  <div class="app-container">
    <h2>他人好友位申请</h2>
    <el-table :data="friendList" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="申请人id" width="100">
        <template slot-scope="{row}">
          <span>{{ row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="申请人姓名" width="150">
        <template slot-scope="{row}">
          <span>{{ row.friendName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="acceptFriend(row)">
            接受
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="Actions" align="center" width="200" class-name="seeMore">
        <template slot-scope="{row}">
          <el-button v-waves class="filter-item" type="primary" @click="refuseFriend(row)">
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <h2>好友请求验证</h2>
    <el-table :data="friendList1" class="data_table" style="width: 100%;">
      <el-table-column prop="name" label="请求id" width="100">
        <template slot-scope="{row}">
          <span>{{ row.friendId }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="用户姓名" width="150">
        <template slot-scope="{row}">
          <span>{{ row.friendName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="place" label="状态" width="150">
        <template slot-scope="{row}">
          <span>等待他人验证</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import axios from 'axios'
  import request from '@/utils/request'
  import Vue from 'vue'
  
  export default {
    // 朋友申请列表
    name: 'friend-apply',
    data(){
      return {
        userId: 0,
        userName: '',
        friendList: [],
        friendList1: []
      }
    },
    mounted(){
      this.init()
    },
    methods: {
      init(){
        this.userId = JSON.parse(sessionStorage.getItem('user')).userId
        this.userName = JSON.parse(sessionStorage.getItem('user')).userName
        // 初始化数据，用户可以看到的朋友发起的清单列表，后面需要写上用户的id
        request.get("/friend/getApplyFriend/" + this.userId ).then(response => {
          var Data=response.data // PFResponse
          this.friendList = Data.data
          this.friendList.forEach(item =>{
            request.get("/user/getuserByid/" + item.userId ).then(re => {
              if (re.data.code == 200){
                // console.log("数据为：" + re.data.data)

                Vue.set(item,'friendName',re.data.data.userName);
              }
            })
          })
        })
        request.get("/friend/getRequestFriend/" + this.userId ).then(request => {
          var Data=request.data // PFResponse
          this.friendList1 = Data.data
          this.friendList1.forEach(item =>{
            request.get("/user/getuserByid/" + item.friendId ).then(re => {
              if (re.data.code == 200){
                // console.log("数据为：" + re.data.data)

                Vue.set(item,'friendName',re.data.data.userName);
              }
            })
          })
        })

      },
      acceptFriend(row) {
        request.post("/friend/surefriend", {
          userId: row.userId,
          friendId: row.friendId,
          friendState: 'FRIEND'
        }).then(request => {
          var Data=request.data // PFResponse
          if (Data.code == 200){
            this.$message.success("接受成功")
            this.init()
          }
        })
      },
      refuseFriend(row) {
        request.post("/friend/refusefriend", {
          userId: row.userId,
          friendId: row.friendId,
          friendState: 'WAIT'
        }).then(request => {
          var Data=request.data // PFResponse
          if (Data.code == 200){
            this.$message.success("拒绝成功")
            this.init()
          }
        })
      }
    }

  }
</script>

<style scoped>

</style>
